from nicegui import ui, Tailwind
from ex4nicegui.reactive import rxui
from ex4nicegui import to_ref, ref_computed, effect, effect_refreshable
from icons import ICON_NAMES

# region shuju
r_input = to_ref("")


@ref_computed
def cp_icon_names():
    return [name for name in ICON_NAMES if name.find(r_input.value) >= 0]


r_pagination = rxui.use_pagination(cp_icon_names, page_size=50)

# endregion


# region 界面

input_search = (
    rxui.input(
        "icon搜索",
        value=r_input,
        placeholder="输入icon图标名字",
    )
    .props('outlined clearable debounce="500"')
    .classes("self-center w-[20rem]")
)


def icon_box(icon_name: str):
    with ui.card().classes(
        "flex-center cursor-pointer gap-1 transition-all hover:scale-105 hover:text-blue-500"
    ) as card:
        ui.icon(icon_name, size="3rem")
        ui.label(icon_name).classes(
            "whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
        )

        ui.tooltip(f"点击复制名字[{icon_name}]")

    async def on_click_card():
        await ui.run_javascript(
            f"navigator.clipboard.writeText('{icon_name}')", respond=False
        )

        ui.notify(f"复制名字[{icon_name}]到剪切板", position="top-right")

    card.on("click", on_click_card)


## 小图标展示区
with ui.grid(columns=10).classes("w-full"):

    @effect_refreshable
    def _():
        for icon_name in r_pagination.current_source.value:
            icon_box(icon_name)


r_pagination.create_q_pagination()
# endregion


ui.run()
